Welcome to LEGOMAN Online shop

Interactive Elements

In-text link

CSS selector:

.

Sample code:

<a herf="">LEGOMAN Website</a>

Rendered element:

LEGOMAN Website

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Default Button</a>

Rendered element:

Default Button

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

<a herf=""><img src = "img/lego.jpg" alt="This is a red LEGO man "></a>

Rendered element:

This is a red LEGO man

Text Elements

Headings

CSS selector:

Sample code:

<h2> Hat</h2> <h3>Head</h3> <h4>Body</h4> <h5>Legs</h5>

Rendered element:

Hat

Head

Body

Legs

Paragraphs

CSS selector:

Sample code:

<p>This is a website selling LEGOman!</p> <p>You can design your own LEGOman here!</p>

Rendered element:

This is a website selling LEGOman!

You can design your own LEGOman here!

Numbered Lists

Sample code:

<ol> <li>red Man </li> <li>blue Man </li> <li>yellow Man </li> </ol>

Rendered element:

  1. red Man
  2. blue Man
  3. yellow Man

Combined Elements

main page,contain different type of LEGOman menu on top

detail page, where user select different LEGOMan and press purchase

checkout page,required user to type in their information

Main Navigation

Main -->detail--->checkout

Product/Service Listing

product:LEGOman Red Price:$5

product:LEGOman Blue Price:$3

product:LEGOman Yellow Price:$7

Citations

https://www.cleanpng.com/png-lego-minifigure-the-lego-group-history-of-lego-leg-909736/